import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import { Button, Badge, Popover } from 'antd'
import ResizeTable from 'components/resize-table'
import SearchArea from 'components/search-area'
import menuRoute from 'routes/menuRoute'

import strategyService from 'containers/budget-setting/budget-organization/budget-strategy/budget-strategy.service'

class BudgetStrategy extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      loading: false,
      searchForm: [
        {type: 'input', id: 'controlStrategyCode', label: messages('budget-setting.key141'/*预算控制策略代码*/)},
        {type: 'input', id: 'controlStrategyName', label: messages('budget-setting.key142'/*预算控制策略名称*/)}
      ],
      searchParams: {
        controlStrategyCode: "",
        controlStrategyName: ""
      },
      columns: [
        {title: messages('budget-setting.key141'/*预算控制策略代码*/), dataIndex: 'controlStrategyCode', key: 'controlStrategyCode'},
        {title: messages('budget-setting.key142'/*预算控制策略名称*/), dataIndex: 'controlStrategyName', key: 'controlStrategyName',
          render: desc => <Popover placement="topLeft" content={desc}>{desc}</Popover>},
        {title: messages('common.column.status')/*状态*/, dataIndex: 'isEnabled', key: 'isEnabled', width: '10%', render: isEnabled =>
          <Badge status={isEnabled ? 'success' : 'error'}
                 text={isEnabled ? messages('common.status.enable')/*启用*/ : messages('common.status.disable')/*禁用*/} />}
      ],
      data: [],    //列表值
      pagination: {
        total: 0
      },
      page: 0,
      pageSize: 10,
      newBudgetStrategy:  menuRoute.getRouteItem('new-budget-strategy','key'),    //新建控制策略
      budgetStrategyDetail:  menuRoute.getRouteItem('budget-strategy-detail','key'),    //预算控制策略详情
    };
  }

  componentDidMount(){
    this.getList();
  }

  //分页点击
  onChangePager = (page) => {
    if(page - 1 !== this.state.page)
      this.setState({ page: page - 1 }, ()=>{
        this.getList();
      })
  };

  getList() {
    const { page, pageSize, searchParams } = this.state;
    this.setState({ loading: true });
    strategyService.getStrategyList(page, pageSize, this.props.id, searchParams).then(res=>{
      if(res.status === 200){
        res.data.map((item, index)=>{
          item.index = page * pageSize + index + 1;
          item.key = item.index;
        });
        this.setState({
          data: res.data,
          loading: false,
          pagination: {
            total: Number(res.headers['x-total-count']) || 0,
            onChange: this.onChangePager,
            current: this.state.page + 1
          }
        })
      }
    })
  }

  //搜索
  search = (result) => {
    let searchParams = {
      controlStrategyCode: result.controlStrategyCode,
      controlStrategyName: result.controlStrategyName
    };
    this.setState({
      searchParams:searchParams,
      loading: true,
      page: 0,
      pagination: {
        current: 1
      }
    }, ()=>{
      this.getList();
    })
  };

  //清空搜索区域
  clear = () => {
    this.setState({searchParams: {
      controlStrategyCode: "",
      controlStrategyName: ""
    }})
  };

  handleNew = () => {
    this.context.router.push(this.state.newBudgetStrategy.url.replace(':id', this.props.organization.id));
  };

  handleRowClick = (record) => {
    this.context.router.push(this.state.budgetStrategyDetail.url.replace(':id', this.props.organization.id).replace(':strategyId', record.id));
  };

  render(){
    const { searchForm, columns, data, pagination, loading } = this.state;
    
    return (
      <div className="budget-strategy">
        <SearchArea
          searchForm={searchForm}
          submitHandle={this.search}
          clearHandle={this.clear}/>
        <div className="table-header">
          <div className="table-header-title">{messages('common.total',{total:`${pagination.total || 0}`})/*共搜索到 {total} 条数据*/}</div>
          <div className="table-header-buttons">
            <Button type="primary" onClick={this.handleNew}>{messages('common.create')/*新建*/}</Button>
          </div>
        </div>
        <ResizeTable
          columns={columns}
          dataSource={data}
          pagination={pagination}
          loading={loading}
          onRow={record => ({onClick: () => this.handleRowClick(record)})}
          bordered
          size="middle"
        />
      </div>
    )
  }

}

BudgetStrategy.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps() {
  return {}
}

export default connect(mapStateToProps)(BudgetStrategy);
